<style scoped>
  .weui-form-preview__hd label, .weui-form-preview__hd em {
    font-size: .9em !important;
  }

  .weui-loadmore_line .weui-loadmore__tips {
    background-color: #eee;
  }

  .rj-cell.max span {
    font-size: 16px;
    padding-right: 20px;
  }

  .rj-cell label {
    color: #333;
    font-size: 14px;
    width: 44%;
    display: inline-block;
    padding: 5px 3%;
    text-align: right;
  }

  .rj-cell span {
    font-size: 14px;
    color: #333;
    display: inline-block;
    width: 50%;
  }

  .rj-cell.note label {
    float: left;
  }

  .rj-cell.note span {
    width: 80%;
    display: inline-block;
  }

  .weui-cells {
    margin-top: 0;
  }

  .weui-cells_form {
    background: #fbfbfb;
  }

  .weui-cell {
    background: #fff;
  }

  .weui-cells__title {
    text-align: left;
  }

  .oitem {
    padding: 3px;
  }

  .hide {
    display: none;
  }

  #acts {
    font-size: 0;
  }

  #acts span {
    font-size: 14px;
  }

  .halfbtn {
    display: inline-block;
    width: 49%;
  }

  .weui-label {
    text-align: left;
  }

  .time {
    border: none;
    font-size: 17px;
  }

  .weui-cell_select {
    padding: 10px 15px;
  }

  .weui-select {
    height: auto;
    line-height: normal;
  }


  .weui_uploader_input_wrp {
    float: left;
    position: relative;
    margin-right: 9px;
    margin-bottom: 9px;
    width: 77px;
    height: 77px;
    border: 1px solid #D9D9D9;
  }

  .weui_uploader_hd {
    padding-top: 0;
    padding-right: 0;
    padding-left: 0;
  }

  .weui_uploader_files {
    list-style: none;
  }

  .weui_uploader_input_wrp:before {
    width: 2px;
    height: 39.5px;
  }

  .weui_uploader_input_wrp:before, .weui_uploader_input_wrp:after {
    content: " ";
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    background-color: #D9D9D9;
  }

  .weui_uploader_input {
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  }

  .weui_uploader_input_wrp:after {
    width: 39.5px;
    height: 2px;
  }

  .weui_uploader_bd {
    overflow: hidden;
  }

  .weui_cell {
    padding: 10px 15px;
    position: relative;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
  }

  .outstore >>> .weui-uploader_files {
    list-style: none;
    overflow-y: hidden;
  }

  .outstore >>> .weui-uploader_file {
    float: left;
    margin-right: 9px;
    margin-bottom: 9px;
    width: 79px;
    background: no-repeat 50%;
    background-size: cover;
  }

  .weui-cell.fir {
    border-top: 0;
  }

  .help {
    text-align: right;
    padding: 5px;
    font-size: 12px;
    color: #bbb;
  }

  .weui_uploader_input_wrp.inrow {
    width: 30px;
    height: 30px;
    margin: 0;
  }

  .weui_uploader_input_wrp:before {
    height: 19.5px;
  }

  .weui_uploader_input_wrp:after {
    width: 19.5px;
  }

  .weui-uploader_file.inrow {
    margin: 0;
    width: 40px;
  }

  li.weui-uploader_file {
    display: inline-block;
    padding: 3px 5px;
  }

  ul#images {
    text-align: right;
  }

  .addPur >>> .ui.selection.dropdown {
    border: none;
  }
  .addPur >>> .ui.dropdown .menu>.item {
    font-size: 18px;
  }
  .addPur >>> .ui.search.dropdown>.text {
    font-size: 18px;
  }

  /*.addPur >>> .ui.search.dropdown>.text {*/
  /*  line-height: 20px;*/
  /*}*/
</style>
<template>
  <div class="addPur" style="overflow: hidden;height: 100%;background: #fafafa;">
    <div
      style="height: 50px; line-height: 50px; background: #f7f7f7; text-align: center; font-size: 16px; border-bottom: 1px solid #bdbbbc; position: relative">
      录入地块信息
      <a href="javascript:;" @click="$router.back(-1)" style="position: absolute; left: 10px; top: 8px">
        <img src="@/assets/back.png" style="width: 20px"/>
      </a>
    </div>
    <div class="weui-cells weui-cells_form">
      <form action="" method="post" id="formid">
        <div class="cellgroup">
          <div class="weui-cell">
            <div class="weui-cell__hd"><label class="weui-label">地块名称</label></div>
            <div class="weui-cell__bd">
              <input class="weui-input" type="text" v-model="form.aname" name="aname" placeholder="请输入地块名称" />
            </div>
          </div>
          <div class="weui-cell">
            <div class="weui-cell__hd"><label class="weui-label">地区</label></div>
            <div class="weui-cell__bd">
              <input class="weui-input" type="text" id="endCity" readonly name="aaddress" v-model="form.aaddress" placeholder="请选择地区" >
            </div>
          </div>
          <div class="weui-cell">
            <div class="weui-cell__hd"><label class="weui-label">详细地址</label></div>
            <div class="weui-cell__bd">
              <input class="weui-input" type="text" v-model="form.adtaddress" name="adtaddress" placeholder="请输入详细地址">
            </div>
          </div>
          <div class="weui-cell">
            <div class="weui-cell__hd"><label class="weui-label">面积</label></div>
            <div class="weui-cell__bd">
              <input class="weui-input inlinput1" type="number" v-model="form.aforests" name="aforests" placeholder="请输入面积">
              <input class="weui-input inlinput2" type="text" readonly value="亩" >
            </div>
          </div>
          <div class="weui-cell">
            <div class="weui-cell__hd"><label class="weui-label">经度</label></div>
            <div class="weui-cell__bd">
              <input class="weui-input" type="text" name="longitude" readonly v-model="form.longitude" placeholder="获取土地经度...">
            </div>
          </div>
          <div class="weui-cell">
            <div class="weui-cell__hd"><label class="weui-label">纬度</label></div>
            <div class="weui-cell__bd">
              <input class="weui-input" type="text" name="latitude" readonly v-model="form.latitude" placeholder="获取土地纬度...">
            </div>
          </div>
          <div class="weui-btn-area">
            <div class="weui-row" style="margin-top: 6px;">
              <input class="weui-btn weui-btn_plain-primary" type="button" @click="setLocation"
                     value="重新获取地块位置信息"/>
            </div>
          </div>
        </div>
        <div class="weui-cell fir">
          <div class="weui-cell__hd"><label class="weui-label">图片上传</label></div>
          <div class="weui-cell__ft">
            <div class="weui_uploader_bd">
              <ul class="weui_uploader_files"></ul>
              <div class="weui_uploader_input_wrp inrow">
                <UploadFile3 class="weui_uploader_input" v-on:pushfile="setFile"></UploadFile3>
              </div>
            </div>
          </div>
          <ul class="weui-uploader_files" id="images">
            <li class="weui-uploader_file" v-for="(fil, index) in filenames" @click=delFile(fil,fileids[index])>
              {{fil}}
            </li>
          </ul>
        </div>
        <p style="font-size: 12px;color: #999;text-align: left;padding-left: 15px;background: #fff;width: 100%;margin-bottom: 20px;">拍照上传土质、水质、空气质量检测报告</p>
        <div class="weui-btn-area">
          <a class="weui-btn weui-btn_primary subbtn" href="javascript:" @click="postForm()">提交</a>
        </div>
      </form>
    </div>
  </div>
</template>

<script>
  import 'vue-search-select/dist/VueSearchSelect.css'
  import { ModelListSelect } from 'vue-search-select'
  import UploadFile3 from "../../common/UploadFile3";
  import wx from 'weixin-js-sdk';
  export default {
    name: 'AddLand2',
    data() {
      return {
        form: {
          province: null,
          city: null,
          area: null,
          aaddress: null,
          adtaddress: null,
          latitude: null,
          longitude: null
        },
        products: [],
        filenames: [],
        fileids: [],
        suppliertype: '',
        productCate: '',
        types: '',
        type: 1,
        orgs: [],
        orgid: ''
      }
    },
    components: {ModelListSelect, UploadFile3},
    created() {
      this.getWxParams();
    },
    methods: {
      getProvinceAndArea: function(lon, lat){
        const that = this;
        const point = new BMap.Point(lon,lat);
        const geoc = new BMap.Geocoder();
        geoc.getLocation(point, function(rs){
          const addComp = rs.addressComponents;
          that.form.province = addComp.province;
          that.form.city = addComp.city;
          that.form.area = addComp.district;
          that.form.adtaddress = addComp.street;
          that.form.aaddress =  addComp.province + " " + addComp.city + " " + addComp.district;
        });
      },
      getWxParams() {
        this.axios({
          method: 'get',
          url: '/prod-api/getWXconfig',
          params: {url: location.href.split("#")[0]}
        }).then(response => {
          if (response.data.code == 200) {
            //配置微信公众号参数
            this.wxConfig(response.data.data);
            //获取经纬度
            this.setLocation();
          } else if (response != undefined && response.data != undefined && response.data.msg == 'sessionTimeOut') {
            //不不设置提示
          } else {
            this.toastError('系统错误');
          }
        });
      },
      wxConfig: function(wxParams) {
        wx.config({
          debug: false,            // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
          appId: wxParams.appId,    // 必填，公众号的唯一标识
          timestamp: wxParams.timestamp,  // 必填，生成签名的时间戳
          nonceStr: wxParams.nonceStr, // 必填，生成签名的随机串
          signature: wxParams.signature,// 必填，签名
          jsApiList: ['getLocation'] // 必填，需要使用的JS接口列表
        });
      },
      setLocation: function() {
        const that = this;
        $.showLoading( "正在定位..." );
        wx.getLocation( {
          type: 'wgs84',
          success: function ( res ) {
            that.form.latitude = res.latitude;
            that.form.longitude = res.longitude;
            that.getProvinceAndArea(res.longitude, res.latitude);
            $.hideLoading();
          },
          fail: function ( res ) {
            $.hideLoading();
            $.toast( "定位失败" );
          }
        } );
      },
      setFile: function (file) {
        this.filenames.push(file.name);
        this.fileids.push(file.id);
      },
      delFile: function (name, id) {
        let that = this;
        $.confirm('确定要删除？', function () {
          that.axios({
            method: 'post',
            url: '/prod-api/common/delete',
            params: {id: id}
          })
          that.fileids = that.fileids.filter(item => {
            return item != id;
          })
          that.filenames = that.filenames.filter(item => {
            return item != name;
          })
        })
      },
      //提交表单数据
      postForm: function () {
        let that = this;
        //表单校验
        if (!this.checkFormElm()) {
          return false;
        }
        //防止重复提交
        $('.subbtn').attr("disabled",true).css("pointer-events","none");
        //显示提交状态
        $.showLoading("正在提交");
        const postData = this.serialize2Obj($("#formid").serializeArray());
        postData.fileIds = this.fileids.join(',');
        this.axios({
          method: 'post',
          url: `/prod-api/tarealand/arealand/saveOrUpdate`,
          data: postData
        }).then(response => {
          //恢复提交按钮可点击
          $('.subbtn').attr('disabled', false).css("pointer-events","auto");
          //关闭提交状态
          $.hideLoading();

          if (response.data.code == 200) {
            this.toastSuccess("保存成功");
            this.$router.push({name: 'LandList2'});
          } else if(response.data.msg) {
            this.toastText(response.data.msg);
          } else {
            this.toastError('系统错误');
          }
        }).catch(function (error) {
          //恢复提交按钮可点击
          $('.subbtn').attr('disabled', false).css("pointer-events","auto");
          //关闭提交状态
          $.hideLoading();
          that.toastError('系统错误');
        });
      },
      checkFormElm: function () {
        let that = this;
        if(!that.form.aname){
          $.alert("请录入地块名称！");
          return false;
        } else if(!that.form.aaddress){
          $.alert("请选择地区！");
          return false;
        } else if(!that.form.adtaddress){
          $.alert("请输入详细地址！");
          return false;
        } else if(!that.form.aforests){
          $.alert("请输入详细地址！");
          return false;
        } else if(!that.form.latitude){
          $.alert("请获取地块位置信息！");
          return false;
        }
        return true;
      }
    }
  }
</script>
